<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Troy Inaction</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<script src="http://code.jquery.com/jquery-latest.js"></script>	
<script src="slider.js" type="application/javascript"></script>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
<script src="popup.js" type="text/javascript"></script>
<script src="dynamicAdd.js" type="text/javascript"></script>

</head>

<body>
<!--In each scrollbar, there is a frame for the scrollbar ("bar"), the scrolling area ("scroller"), and the scrollable bar ("box").  Each box holds a list of event objects that are created dynamically in order to display the current event information that can be selected to view their corresponding descriptions.-->

<!--The Dates scrollbar-->
<div id="Dates" class="bar">
  <div id="Date-scroller" class="scroller">
    <div id="Date-box" class="box">
		<script language="Javascript">
			addElementDate(10);
		</script>
    </div>
  </div>
  <div id="Date-previous" class="prev"></div>
  <div id="Date-next" class="next"></div>
</div>

<br />

<!--The scrollbar for RPI events-->
<div id="RPI" class="bar">
  <div id="RPI-scroller" class="scroller">
    <div id="RPI-box" class="box">
		<script language="Javascript">
				addElementRPI(4);
		</script>
    </div>
  </div>
  <div id="RPI-previous" class="prev"></div>
  <div id="RPI-next" class="next"></div>
</div>

<br />

<!--The scrollbar for Troy events-->
<div id="Troy" class="bar">
  <div id="Troy-scroller" class="scroller">
    <div id="Troy-box" class="box">
      <a href="javascript:setVisibleRPI('description',true)"><div class="Troy-event">
		<h2>Previous Event</h2>
		<p>Date<br /> Time <br />Location</p>
      </div></a>
      <a href="javascript:setVisibleRPI('description',true)"><div class="Troy-event">
		<h2>Current Event</h2>
		<p>Date<br /> Time <br />Location</p>
      </div></a>
      <a href="javascript:setVisibleRPI('description',true)"><div class="Troy-event">
		<h2>Next Event</h2>
		<p>Date<br /> Time <br />Location</p>
      </div></a>    </div>
  </div>
  <div id="Troy-previous" class="prev"></div>
  <div id="Troy-next" class="next"></div>
</div>

<!--The description popup for each event. This box pops up and dynamically fills with the corresponding description when the event is selected.-->
<div id="description"><span id="close">
	<a href="javascript:setVisibleRPI('description')"><img src="images/close.gif" alt="Close" border="0" /></a></span>
</div>

<!--Description-->
<script language="Javascript">
	setHead('description');
</script>

</body>
</html>
